<style lang="scss">
.search-btn {
    width: 20%;
    font-size: 2rem;
    padding: 0.3rem 0;
    color: #ffffff;
    border-radius: 20px;
    text-align: center;
    background-color: #FF6600;
}
</style>

<template>
    <div>
        <div class="search-input-container">
            <div class="search-group">
                <!-- <v-input class="search-input" placeholder="搜索商品类别或粘贴宝贝名称" v-model="keyWord"></v-input> -->
                <input id="search-ipt" class="search-input" placeholder="搜索商品类别或粘贴宝贝名称" v-model="keyWord"/>
                <!-- <v-button type="primary" icon="search" @click="searchItem()"><span>搜索</span></v-button> -->
                <div class="search-btn" @click="searchItem()">搜索</div>
            </div>
        </div>
        <div class="search-page-container">
            <div class="his-search-panel">
                <div class="his-title-bar">
                    <div class="tab-title">搜索历史</div>
                    <img class="del-btn" src="/static/img/delete.png" @click="clearHistoryItems()"/>
                </div>
                
                <div class="label-panel">
                    <div class="his-item" v-for="hisItem in searchHistory" :key="hisItem" @click="clickHistoryItem(hisItem)">
                        {{hisItem}}
                    </div>
                </div>
            </div>

            <div class="hot-search-panel">
                <div class="tab-title">热门搜索</div>
                <div class="label-panel">
                    <div class="hot-item" v-for="hotItem in hotSearchList" :key="hotItem" @click="clickHistoryItem(hotItem)">
                        {{hotItem}}
                    </div>
                </div>
            </div>
        </div>

        <return-back></return-back>
    </div>
</template>

<script>
import wx from 'weixin-js-sdk'
export default {
    name: 'search-page',
    data() {
        return {
            keyWord: "",
            searchHistory: [],
            hotSearchList: ['旗袍', '黑色工装裤', '2019流行夏季裙子']
        }
    },
    mounted: function() {
        // window.onscroll = function(){}
        window.addEventListener('scroll',function(){})
        let searchInput = document.getElementById("search-ipt")
        searchInput.focus()
        let historyItemsStr = localStorage.getItem('historyItems')
        if (historyItemsStr) {
            this.searchHistory = historyItemsStr.split('-')
        }
        this.getSignPackage()
    },

    methods: {
        searchItem: function() {
            if (this.keyWord == "") {
                return
            }
            this.addKeyWordToHis()
            this.$router.push({path: 'search-res', query: {key_word: this.keyWord}})
        },

        addKeyWordToHis: function() {
            if (this.searchHistory.indexOf(this.keyWord) >= 0) {
                return
            }
            this.searchHistory.push(this.keyWord)
            localStorage.setItem('historyItems', this.searchHistory.join('-'))
        },

        clearHistoryItems: function() {
            this.searchHistory = []
            localStorage.removeItem('historyItems')
        },

        clickHistoryItem: function(hisItem) {
            this.keyWord = hisItem
        },

        getSignPackage: function() {
			let currentUrl = window.location.href
			console.log(currentUrl)
			// let urlArr = currentUrl.split("#")
			let urlArr = currentUrl.split("#")
      		let url = encodeURIComponent(urlArr[0])
			// let url = encodeURIComponent(currentUrl)

			this.axios.get(`getAccess.php?url=${url}`)
				.then(res => {
					console.log(res)
					this.setWxConfig(res.data)
				})
				.catch(error => {
					console.log(error)
				})
		},

		setWxConfig: function(data) {
			wx.config({
				debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				appId: data.appId, // 必填，公众号的唯一标识
				timestamp: data.timestamp, // 必填，生成签名的时间戳
				nonceStr: data.nonceStr, // 必填，生成签名的随机串
				signature: data.signature,// 必填，签名
				jsApiList: [
					'onMenuShareTimeline',
					'onMenuShareAppMessage'
				] // 必填，需要使用的JS接口列表
			});
			wx.ready(function() {
				console.log('接口配置信息已经完成')
				wx.onMenuShareTimeline({
					title: "淘宝天猫优惠券",
					link: 'http://www.leil.club',
					imgUrl: 'http://neimengweixin.cdn.xianyugame.com/66game/youhuiquan.jpg',
					success: function() {
						console.log('用户点击按钮回调')
					}
				})

				wx.onMenuShareAppMessage({
					title: '淘宝天猫优惠券', // 分享标题
					desc: '百万淘宝天猫优惠券等你来领！', // 分享描述
					link: 'http://www.leil.club', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: 'http://neimengweixin.cdn.xianyugame.com/66game/youhuiquan.jpg', // 分享图标
					type: '', // 分享类型,music、video或link，不填默认为link
					dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
					success: function () {
						// 用户点击了分享后执行的回调函数
						console.log('用户点击了分享给朋友按钮')
					}
				})
			})
		},
    }

}
</script>

